<template>
  <div>
    <div class="card-group mb-3">
      <div v-for="(item, key) in userTasks" class="card card-hover" :key="key">
        <div class="card-body p-3">
          <span class="task-title" :class="item.isCurrentTask ? 'font-weight-bold' : ''">
            {{ item.title }}
          </span>
          <div class="text-muted mb-2">
            <div v-for="(subItem, subIndex) in item.subTitle" :key="subIndex">
              <span>{{ subItem.prefix }}</span>
              <span :class="subItem.css">{{ subItem.num }}</span>
            </div>
          </div>
          <div v-for="(list, serial) in item.list" class="mb-2" :key="serial">
            <router-link :to="list.url" class="task-link">
              <div class="d-flex justify-content-between">
                <small>
                  <span class="mr-3">{{ list.title }}</span>
                  <span>{{ list.num }}</span>
                </small>
                <small>{{ list.funds }} 万元</small>
              </div>
              <div class="progress-bar">
                <div
                  class="progress-bar-full"
                  :class="`bg-${list.bgColor}`"
                  :style="{ width: `${list.percent}%` }"
                ></div>
              </div>
            </router-link>
          </div>
        </div>
      </div>
    </div>

    <h5 class="text-muted">{{ taskName }}</h5>

    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getNumAndPercent } from '@/credit/views/city/self/Index'

export default {
  components: {},
  props: {},
  data() {
    return {
      jobArray: [
        'org_corp',
        'org_c_manage',
        'org_c_emp',
        'org_r_manage',
        'org_r_emp',
        'org_p_manage',
        'org_p_emp',
        'org_credit_super',
        'org_c_general',
        'org_c_general_emp',
        'org_f_manage',
        'org_f_emp',
      ],
    }
  },
  computed: {
    ...mapGetters(['job', 'taskCountFast']),
    routeName() {
      return this.$route.name || ''
    },
    taskName() {
      const routes = this.$route.matched.slice(-2)
      return routes.map(item => item.meta.title).join('：')
    },
    tasks() {
      // 受理
      const approveTotal = getNumAndPercent(
        this.taskCountFast.claim_no_total,
        this.taskCountFast.claim_yes_total,
        this.taskCountFast.claim_confuse_total
      )
      const approveFunds = getNumAndPercent(
        this.taskCountFast.claim_no_funds,
        this.taskCountFast.claim_yes_funds,
        this.taskCountFast.claim_confuse_funds
      )

      // 立项

      const itemTotal = getNumAndPercent(
        this.taskCountFast.item_no_total,
        this.taskCountFast.item_yes_total,
        this.taskCountFast.item_confuse_total
      )
      const itemFunds = getNumAndPercent(
        this.taskCountFast.item_no_funds,
        this.taskCountFast.item_yes_funds,
        this.taskCountFast.item_confuse_funds
      )

      // 项目调查
      const investigateTotal = getNumAndPercent(
        this.taskCountFast.project_approval_no_total,
        this.taskCountFast.project_approval_ing_total,
        this.taskCountFast.project_approval_yes_total,
        this.taskCountFast.project_approval_confuse_total
      )
      const investigateFunds = getNumAndPercent(
        this.taskCountFast.project_approval_no_funds,
        this.taskCountFast.project_approval_ing_funds,
        this.taskCountFast.project_approval_yes_funds,
        this.taskCountFast.project_approval_confuse_funds
      )
      // 放款登记
      const loanRegisterTotal = getNumAndPercent(
        this.taskCountFast.loan_register_no_total,
        this.taskCountFast.loan_register_yes_total,
        0
      )
      const loanRegisterFunds = getNumAndPercent(
        this.taskCountFast.loan_register_no_funds,
        this.taskCountFast.loan_register_yes_funds,
        0
      )

      // 贷后管理
      const postloanTotal = getNumAndPercent(
        this.taskCountFast.load_beh_normal_total,
        this.taskCountFast.load_beh_expire_total,
        this.taskCountFast.load_beh_success_total,
        this.taskCountFast.load_beh_exc_total
      )
      const postloanFunds = getNumAndPercent(
        this.taskCountFast.load_beh_normal_funds,
        this.taskCountFast.load_beh_expire_funds,
        this.taskCountFast.load_beh_success_funds,
        this.taskCountFast.load_beh_exc_funds
      )
      return [
        {
          title: '项目受理',
          job: this.jobArray,
          subTitle: [
            {
              prefix: '已推荐项目：',
              num: approveTotal.sum,
              css: '',
            },
          ],
          namePrefix: 'unionApprove',
          list: [
            {
              title: '待受理',
              num: approveTotal.data[0].count,
              percent: approveTotal.data[0].percent,
              funds: approveFunds.data[0].count,
              bgColor: 'info',
              url: { name: 'unionFastApproveNo' },
            },
            {
              title: '已受理',
              num: approveTotal.data[1].count,
              percent: approveTotal.data[1].percent,
              funds: approveFunds.data[1].count,
              bgColor: 'success',
              url: { name: 'unionFastApprovePass' },
            },
            {
              title: '已拒绝',
              num: approveTotal.data[2].count,
              percent: approveTotal.data[2].percent,
              funds: approveFunds.data[2].count,
              bgColor: 'danger',
              url: { name: 'unionFastApproveRefuse' },
            },
          ],
        },
        {
          title: '项目立项',
          job: this.jobArray,
          subTitle: [
            {
              prefix: '已受理项目：',
              num: approveTotal.data[1].count,
              css: '',
            },
          ],
          namePrefix: 'unionApprove',
          list: [
            {
              title: '待立项',
              num: itemTotal.data[0].count,
              percent: itemTotal.data[0].percent,
              funds: itemFunds.data[0].count,
              bgColor: 'info',
              url: { name: 'unionFastItemNo' },
            },
            {
              title: '已立项',
              num: itemTotal.data[1].count,
              percent: itemTotal.data[1].percent,
              funds: itemFunds.data[1].count,
              bgColor: 'success',
              url: { name: 'unionFastItemPass' },
            },
            {
              title: '已拒绝',
              num: itemTotal.data[2].count,
              percent: itemTotal.data[2].percent,
              funds: itemFunds.data[2].count,
              bgColor: 'danger',
              url: { name: 'unionFastItemRefuse' },
            },
          ],
        },
        {
          title: '项目审批',
          job: this.jobArray,
          subTitle: [
            {
              prefix: '已立项项目：',
              num: itemTotal.data[1].count,
              css: '',
            },
          ],
          namePrefix: 'fastInvest',
          list: [
            {
              title: '待审批',
              num: investigateTotal.data[0].count,
              percent: investigateTotal.data[0].percent,
              funds: investigateFunds.data[0].count,
              bgColor: 'info',
              url: { name: 'fastInvestNo' },
            },
            {
              title: '审批中',
              num: investigateTotal.data[1].count,
              percent: investigateTotal.data[1].percent,
              funds: investigateFunds.data[1].count,
              bgColor: 'warning',
              url: { name: 'fastInvestIng' },
            },
            {
              title: '已审批',
              num: investigateTotal.data[2].count,
              percent: investigateTotal.data[2].percent,
              funds: investigateFunds.data[2].count,
              bgColor: 'success',
              url: { name: 'fastInvestPass' },
            },
            {
              title: '已拒绝',
              num: investigateTotal.data[3].count,
              percent: investigateTotal.data[3].percent,
              funds: investigateFunds.data[3].count,
              bgColor: 'danger',
              url: { name: 'fastInvestRefuse' },
            },
          ],
        },
        {
          title: '放款登记',
          job: this.jobArray,
          subTitle: [
            {
              prefix: '已审批项目：',
              num: investigateTotal.data[2].count,
              css: '',
            },
          ],
          namePrefix: 'unionApprove',
          list: [
            {
              title: '待登记',
              num: loanRegisterTotal.data[0].count,
              percent: loanRegisterTotal.data[0].percent,
              funds: loanRegisterFunds.data[0].count,
              bgColor: 'info',
              url: { name: 'unionFastRegisterNo' },
            },
            {
              title: '已登记',
              num: loanRegisterTotal.data[1].count,
              percent: loanRegisterTotal.data[1].percent,
              funds: loanRegisterFunds.data[1].count,
              bgColor: 'success',
              url: { name: 'unionFastRegisterPass' },
            },
            {
              title: '已拒绝',
              num: loanRegisterTotal.data[2].count,
              percent: loanRegisterTotal.data[2].percent,
              funds: loanRegisterFunds.data[2].count,
              bgColor: 'danger',
              url: { name: 'unionFastRegisterRefuse' },
            },
          ],
        },
        {
          title: '贷后管理',
          job: this.jobArray,
          subTitle: [
            {
              prefix: '已调查项目',
              num: loanRegisterTotal.data[1].count,
              css: '',
            },
          ],
          namePrefix: 'unionPostloan',
          list: [
            {
              title: '在保项目',
              num: postloanTotal.data[0].count,
              percent: postloanTotal.data[0].percent,
              funds: postloanFunds.data[0].count,
              bgColor: 'info',
              url: { name: 'fastPostloaning' },
            },
            {
              title: '即将到期',
              num: postloanTotal.data[1].count,
              percent: postloanTotal.data[1].percent,
              funds: postloanFunds.data[1].count,
              bgColor: 'primary',
              url: { name: 'fastPostloanExpir' },
            },
            {
              title: '解保项目',
              num: postloanTotal.data[2].count,
              percent: postloanTotal.data[2].percent,
              funds: postloanFunds.data[2].count,
              bgColor: 'warning',
              url: { name: 'fastPostloanFinish' },
            },
            {
              title: '异常项目',
              num: postloanTotal.data[3].count,
              percent: postloanTotal.data[3].percent,
              funds: postloanFunds.data[3].count,
              bgColor: 'success',
              url: { name: 'fastPostloanAbnormal' },
            },
          ],
        },
      ]
    },
    userTasks() {
      return this.tasks.filter(task => {
        const { namePrefix } = task
        task.isCurrentTask = this.routeName.includes(namePrefix)
        return true // !job || job.includes(this.job)
      })
    },
    userRouter() {
      return this.routeName && this.userTasks.length
        ? { name: this.routeName }
        : this.userTasks[0].list[0].url
    },
  },
  watch: {
    routeName() {
      this.initTask()
    },
  },
  created() {
    this.$store.dispatch('getTaskCountFast')
    this.initTask()
  },
  mounted() {},
  methods: {
    initTask() {
      if (!this.routeName || this.routeName !== this.userRouter.name) {
        this.$router.replace(this.userRouter)
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.task-title {
  color: #333;
  font-size: 1.25rem;

  &.active {
    font-weight: bold;
    color: $primary;
    color: var(--primary);
  }
}

.card-hover {
  transition: all 0.3s;
  &:hover {
    box-shadow: 0 2px 6px $gray-400;
  }
}

.task-link {
  color: $gray-600;
  &.exact-active {
    color: $primary;
    color: var(--primary);
  }
}
</style>
